<html>
  <head></head>
  <style>
    #box {
      display: flex;
      align-items: center;
      padding: 20px;
    }
    #btn_1,
    #btn_2,
    #link {
      box-sizing: border-box;
      display: inline-block;
      height: 28px;
      padding: 4px 6px;
      border: 1px solid palevioletred;
      cursor: pointer;
      margin-right: 10px;
    }
  </style>
  <body>
<div id="box">
  <button id="btn_1" idd="btn_1">事件委托</button>
  <button id="btn_2">事件委托</button>
  <a id="link" href="https://www.baidu.com">baidu.com</a>
</div>
<script>
  function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
  }

  var box = document.getElementById('box')
  var a = document.getElementById('a')

  bindEvent(box, 'click', function (e) {
    e.preventDefault()

    console.log('attributes',e.target.attributes);
    console.log('nodeName',e.target.nodeName);

    // 兼容IE 标准：event.target  IE：window.event.srcElement
    var target = e.target || window.event.srcElement

    if (target.nodeName.toLocaleLowerCase() == 'a') {
      console.log('a标签事件委托给了box')
    }
    if (target.nodeName.toLocaleLowerCase() == 'button') {
      console.log('button标签事件委托给了box')
    }
  })
</script>
  </body>
</html>
